import React, { useState } from 'react'
import { ResultPage, Card } from 'antd-mobile'
import {useSelector,useDispatch,} from 'react-redux'
import { Button, Toast ,Image} from 'antd-mobile'
import { AntOutline, RightOutline, } from 'antd-mobile-icons'
import { Cityslice } from '../../store/Citystore'
import { Outlet,useNavigate } from 'react-router-dom'
function Index() {
       let navigate=useNavigate()
    const {start,end}=useSelector((state)=>state.Citystore)
    console.log(start,end);
    let [name,setName]=useState('啦斤斤计较局域')
    let [img,setImg]=useState('https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ')
  return (
    <div>
    <ResultPage
      status=''
      title='便捷购票'
      description='便捷购票，便捷购票'
    >

      <Card style={{ marginTop: 12 }}>
        <span onClick={()=>navigate('/city/start')}> {start} </span>
         <span  onClick={()=>navigate('/city/end')}>{end}</span>
      </Card>
       <Card
          icon={<AntOutline style={{ color: '#1677ff' }} />}
          title={<div style={{ fontWeight: 'normal' }}>卡片标题</div>}
          extra={<RightOutline />}
          style={{ borderRadius: '16px' }}
        >
          <div>
             <Image src={img} style={{width:'150px',height:'150px'}}/>
             <p>{name}</p>
          </div>
          <div>
            <Button
              color='primary'
              onClick={() => navigate(`/deatil?name=${name}?img=${img}`)
              }
            >
              底部按钮
            </Button>
          </div>
        </Card>
    </ResultPage>
    
    </div>
  )
}

export default Index
